html { scroll-behavior: smooth; }
body { font-family: var(--font-body); font-weight: 300; color: var(--color-black); background-color: var(--color-off-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.font-display { font-family: var(--font-display); letter-spacing: 0.03em; }
.font-body { font-family: var(--font-body); }

/* Responsive container */
.container-wide {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 1024px) {
  .container-wide { padding-left: 2.5rem; padding-right: 2.5rem; }
}
@media (min-width: 1700px) {
  .container-wide { max-width: 1550px; }
}

/* Nav container */
.nav-container {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 1024px) {
  .nav-container { padding-left: 2.5rem; padding-right: 2.5rem; }
}
@media (min-width: 1700px) {
  .nav-container { max-width: 1550px; }
}

/* Reveal animations */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); }
/* `transform: none` (not translateY(0)) so the reveal element doesn't create a
   stacking context — this lets `mix-blend-mode: multiply` on illustrations
   inside reach the page background (Places skin v3 parity). */
.reveal.visible { opacity: 1; transform: none; }

/* mix-blend-mode: multiply illustrations must render at full opacity from the
   first paint. While a .reveal ancestor animates opacity (0 -> 1) the element
   is rendered into an isolated group, so multiply blends against that empty
   buffer instead of the page background — the image flashes with its white
   backdrop, then snaps to the correct blend at opacity:1. Rendering any reveal
   that wraps a multiply image instantly (no fade) removes the flicker. */
.reveal:has(img[style*="mix-blend-mode: multiply"]) {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.stagger-children .reveal:nth-child(1) { transition-delay: 0ms; }
.stagger-children .reveal:nth-child(2) { transition-delay: 100ms; }
.stagger-children .reveal:nth-child(3) { transition-delay: 200ms; }
.stagger-children .reveal:nth-child(4) { transition-delay: 300ms; }
.stagger-children .reveal:nth-child(5) { transition-delay: 400ms; }
.stagger-children .reveal:nth-child(6) { transition-delay: 500ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .stagger-children .reveal { transition-delay: 0ms !important; }
  .scroll-indicator { animation: none; }
  .img-hover-container img { transition: none; }
  .mobile-overlay { transition: none !important; }
}

/* Image hover */
.img-hover-container { overflow: hidden; }
.img-hover-container img { transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.img-hover-container:hover img { transform: scale(1.04); }

/* Focus visible */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-terracotta); outline-offset: 2px; }

/* Nav transition (hero variant) */
.nav-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background-color 0.4s ease, box-shadow 0.4s ease, top 0.4s ease; }
.nav-transparent { background-color: transparent; top: 50px; }
.nav-solid { top: 0 !important; background-color: rgba(250, 250, 247, 0.97); box-shadow: 0 1px 0 rgba(0,0,0,0.06); }
.nav-solid .nav-link { color: var(--color-black) !important; }
.nav-solid .nav-logo-text { color: var(--color-black) !important; }
.nav-solid .nav-cta { border-color: var(--color-black) !important; color: var(--color-black) !important; }
.nav-solid .nav-cta:hover { background-color: var(--color-black) !important; color: var(--color-off-white) !important; }
.nav-solid .hamburger-line { background-color: var(--color-black) !important; }

/* Dual logo visibility */
.nav-transparent .logo-hero { display: block; filter: brightness(0) invert(1); }
.nav-transparent .logo-sticky { display: none; }
.nav-solid .logo-hero { display: none; }
.nav-solid .logo-sticky { display: block; }
.nav-logo { transition: height 0.4s ease; }

/* Hamburger */
.hamburger-line { display: block; width: 22px; height: 1.5px; background-color: var(--color-black); transition: transform 0.3s ease, opacity 0.3s ease; }
.nav-transparent .hamburger-line { background-color: #FAFAF7; }
.hamburger-open .hamburger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger-open .hamburger-line:nth-child(2) { opacity: 0; }
.hamburger-open .hamburger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile overlay */
.mobile-overlay { position: fixed; inset: 0; z-index: 40; background-color: var(--color-off-white); opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
.mobile-overlay.open { opacity: 1; pointer-events: auto; }

/* Mobile menu open — when the off-white overlay is up, the hero-variant nav
   (.nav-transparent) renders a white logo + off-white hamburger lines that
   vanish into the overlay's off-white background. Force the dark/solid logo +
   hamburger colouring so the logo and X-close (open hamburger) stay visible
   above the overlay. z-index already 50 (.nav-fixed) > 40 (overlay). */
.nav-fixed.nav-menu-open .logo-hero { filter: none; }
.nav-fixed.nav-menu-open .hamburger-line { background-color: var(--color-black); }

/* Scroll indicator */
@keyframes scrollBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.scroll-indicator { animation: scrollBounce 2s ease-in-out infinite; }

/* Terracotta divider */
.divider-terracotta { width: 48px; height: 2px; background-color: var(--color-terracotta); }

/* Collection overlay */
.collection-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(17,17,17,0.6) 0%, rgba(17,17,17,0.1) 50%, transparent 100%); transition: opacity 0.4s ease; }
.collection-card:hover::after { background: linear-gradient(to top, rgba(17,17,17,0.7) 0%, rgba(17,17,17,0.2) 60%, transparent 100%); }

/* Kids Running illustration */
.kids-illus { width: 55%; max-width: 420px; }
@media (min-width: 768px) { .kids-illus { width: 40%; max-width: 480px; } }
@media (min-width: 1024px) { .kids-illus { width: 34%; max-width: 520px; } }

/* Hero parallax overlay */
.hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(17,17,17,0.025) 0%,
    rgba(17,17,17,0.025) 40%,
    rgba(17,17,17,0.025) 100%
  );
}

/* Filter bar — underline style (no rounded pills). Symmetric vertical padding
   so the label is vertically centred inside the sticky strip (items-center
   centres the anchor; equal top/bottom padding centres the text within it). */
.filter-btn { position: relative; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.filter-btn::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: transparent; transition: background-color 0.3s ease; }
.filter-btn.active::after { background-color: var(--color-terracotta); }
.filter-btn.active { color: var(--color-black); }

/* Filter scroll */
.filter-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.filter-scroll::-webkit-scrollbar { display: none; }

/* Villa hero illustrations */
.hero-illustration { pointer-events: none; user-select: none; }
.villas-illus-left {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  mix-blend-mode: multiply;
  left: -1rem;
  width: 240px;
}
.villas-illus-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  mix-blend-mode: multiply;
  right: -3rem;
  width: 276px;
}
@media (min-width: 1024px) {
  .villas-illus-left { left: -1.5rem; width: 320px; }
  .villas-illus-right { right: -4rem; width: 370px; }
}
@media (min-width: 1280px) {
  .villas-illus-left { left: -1.5rem; width: 400px; }
  .villas-illus-right { right: -5rem; width: 460px; }
}

/* Villa-v4 specifics */
.booking-widget { position: sticky; top: 112px; }
/* Small desktops (lg, 1024–1279px): the booking card is taller than the
   viewport minus the 112px offset, so its bottom (the Enquire button) is cut
   below the fold while stuck. Centre it vertically on screen instead so the
   whole card stays visible. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .booking-widget { top: 50%; transform: translateY(-50%); }
}
.mobile-booking-bar { transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); }
.mobile-booking-bar.visible { transform: translateY(0); }
.enquiry-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(17,17,17,0.45); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
.enquiry-overlay.open { opacity: 1; pointer-events: auto; }
.enquiry-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 101; width: 100%; max-width: 672px; background: var(--color-off-white); transform: translateX(100%); transition: transform 0.45s cubic-bezier(0.22,1,0.36,1); overflow-y: auto; overscroll-behavior: contain; }
.enquiry-panel.open { transform: translateX(0); }
@media (max-width: 639px) { .enquiry-panel { max-width: 100%; } }
.stepper-btn { width: 32px; height: 32px; border: 1px solid var(--color-stone); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.2s ease; user-select: none; }
.stepper-btn:hover { border-color: var(--color-charcoal); }
.radio-pill input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.radio-pill label { padding: 6px 16px; border: 1px solid var(--color-stone); font-size: 12px; letter-spacing: 0.05em; cursor: pointer; transition: all 0.2s ease; }
.radio-pill input[type="radio"]:checked + label { background: var(--color-black); color: var(--color-off-white); border-color: var(--color-black); }
.radio-pill input[type="radio"]:focus-visible + label { outline: 2px solid var(--color-terracotta); outline-offset: 2px; }
.suite-card:focus-visible { outline: 2px solid var(--color-terracotta); outline-offset: 2px; }
.bg-terracotta { --tw-bg-opacity: 1; background-color: rgb(196 99 74 / var(--tw-bg-opacity, 1)); }
@media (hover: none) { .suite-desc { max-height: 6rem !important; opacity: 1 !important; } }
.lightbox { opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
.lightbox.active { opacity: 1; pointer-events: auto; }
.highlight-row { border-bottom: 1px solid rgba(207,204,193,0.45); padding-top: 2rem; padding-bottom: 2rem; }
.highlight-row:first-child { border-top: 1px solid rgba(207,204,193,0.45); }
.highlight-num {
  font-family: var(--font-display);
  font-size: 5rem; line-height: 1;
  color: rgba(207,204,193,0.6);
  transition: color 0.3s ease;
  user-select: none; flex-shrink: 0;
  min-width: 5.5rem;
}
@media (min-width: 768px) { .highlight-num { font-size: 6.5rem; min-width: 7rem; } }
.highlight-row:hover .highlight-num { color: rgba(196,99,74,0.32); }
.fit-panel { background-color: #D4BFB0; }
.fit-consideration { padding-left: 0; }
.interiors-panel { background-color: #e3e1da; }
.exteriors-panel { background-color: #B8C8B8; }
.distance-strip { display: flex; border: 1px solid rgba(207,204,193,0.55); }
.distance-item { flex: 1; padding: 1.75rem 1.25rem; border-right: 1px solid rgba(207,204,193,0.55); transition: background-color 0.2s ease; }
.distance-item:last-child { border-right: none; }
.distance-item:hover { background-color: rgba(233,226,216,0.5); }
.distance-num { font-family: var(--font-display); font-style: italic; font-size: 2.8rem; line-height: 1; color: var(--color-charcoal); }
@media (max-width: 639px) {
  .distance-strip { flex-wrap: wrap; }
  .distance-item { flex: 0 0 50%; border-bottom: 1px solid rgba(207,204,193,0.55); }
  .distance-item:nth-child(2n) { border-right: none; }
  .distance-item:nth-last-child(-n+2):nth-child(odd), .distance-item:last-child { border-bottom: none; }
}
.gallery-extra { display: none; }
.gallery-extra.expanded { display: grid; }
.amenity-category-header { display: flex; align-items: center; margin-bottom: 1rem; }
.amenity-item { display: flex; align-items: flex-start; gap: 0.75rem; }
.amenity-bullet { width: 5px; height: 5px; border-radius: 50%; background-color: var(--color-terracotta); flex-shrink: 0; margin-top: 0.55rem; }
.amenity-items {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1rem;
  color: #2C2926;
  line-height: 1.7;
}
.amenity-items ul,
.amenity-items ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
.amenity-items li {
  position: relative;
  padding-left: 1rem;
}
.amenity-items ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #C4634A;
}
.amenity-items ol {
  counter-reset: amenity-counter;
}
.amenity-items ol > li {
  counter-increment: amenity-counter;
}
.amenity-items ol > li::before {
  content: counter(amenity-counter) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: 'Alta', sans-serif;
  font-style: italic;
  color: #C4634A;
}
.amenity-items p {
  margin: 0;
  padding: 0;
}
.amenity-items strong { font-weight: 500; color: #2C2926; }
.amenity-items a { color: #C4634A; text-decoration: underline; text-underline-offset: 3px; }
.accordion-body { overflow: hidden; max-height: 3000px; transition: max-height 0.55s cubic-bezier(0.22,1,0.36,1); }
.accordion-body.closed { max-height: 0; }
.section-accordion-trigger .accordion-plus-v { transition: opacity 0.2s ease; }
.section-accordion-trigger[aria-expanded="true"] .accordion-plus-v { opacity: 0; }
.section-accordion-trigger[aria-expanded="false"] .accordion-plus-v { opacity: 1; }
/* Layout accordion: first-paragraph teaser shown only while collapsed (full content lives in the body). */
[data-layout-preview]:empty { display: none; }
.section-accordion-trigger[aria-expanded="true"] [data-layout-preview] { display: none; }
input[type="date"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.5; cursor: pointer; }
#calGrid button:not(:disabled):hover { background-color: var(--color-warm-beige); }

/* Journal progress bar */
.reading-progress { position: fixed; top: 0; left: 0; height: 3px; background-color: var(--color-terracotta); z-index: 60; transition: width 0.1s linear; }

/* Legal / long-form prose (Booking Terms, Privacy, Cookie) */
.legal-content h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: normal; color: var(--color-charcoal); margin-top: 3rem; margin-bottom: 1rem; letter-spacing: 0.02em; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 500; color: var(--color-charcoal); margin-top: 2rem; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
.legal-content p { font-family: var(--font-body); font-size: 1rem; color: var(--color-medium-grey); line-height: 1.8; margin-bottom: 1rem; }
.legal-content ul { list-style: none; padding-left: 0; margin-bottom: 1.5rem; }
.legal-content ul li { font-family: var(--font-body); font-size: 1rem; color: var(--color-medium-grey); line-height: 1.8; padding-left: 1.25rem; position: relative; margin-bottom: 0.5rem; }
.legal-content ul li::before { content: ''; position: absolute; left: 0; top: 0.75rem; width: 6px; height: 1px; background-color: var(--color-terracotta); }
.legal-content a { color: var(--color-terracotta); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; }
.legal-content a:hover { color: var(--color-charcoal); }
.legal-content strong { font-weight: 500; color: var(--color-charcoal); }
.section-divider { width: 48px; height: 1px; background-color: var(--color-stone); margin: 2.5rem 0; }

/* RTE Body prose (applied to any container wrapping {{{Body}}} RTE output) */
.prose-ac > *:first-child { margin-top: 0; }
.prose-ac > *:last-child { margin-bottom: 0; }
.prose-ac p { margin-bottom: 1.25em; line-height: 1.7; }
.prose-ac p:last-child { margin-bottom: 0; }
.prose-ac a { color: var(--color-terracotta); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; }
.prose-ac a:hover { color: var(--color-charcoal); }
.prose-ac strong { font-weight: 500; color: var(--color-charcoal); }
.prose-ac em { font-style: italic; }
.prose-ac h2 { font-family: var(--font-display); font-weight: normal; font-size: 1.75rem; color: var(--color-charcoal); margin-top: 1.75em; margin-bottom: 0.6em; letter-spacing: -0.005em; line-height: 1.2; }
.prose-ac h3 { font-family: var(--font-display); font-weight: normal; font-size: 1.4rem; color: var(--color-charcoal); margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.25; }
.prose-ac h4 { font-family: var(--font-body); font-weight: 500; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-charcoal); margin-top: 1.5em; margin-bottom: 0.5em; }
.prose-ac ul, .prose-ac ol { margin: 1em 0 1.25em; padding-left: 1.5em; }
.prose-ac ul { list-style: disc; }
.prose-ac ol { list-style: decimal; }
.prose-ac li { margin-bottom: 0.4em; line-height: 1.7; }
.prose-ac li::marker { color: var(--color-terracotta); }
.prose-ac blockquote { border-left: 2px solid var(--color-terracotta); padding-left: 1.25rem; margin: 1.5em 0; font-style: italic; color: var(--color-charcoal); }

/* Dark-background variant (CenteredCTA dark, charcoal owners block, etc.) */
.prose-ac-dark a { color: var(--color-terracotta); text-decoration: underline; }
.prose-ac-dark a:hover { color: var(--color-off-white); }
.prose-ac-dark strong { color: var(--color-off-white); }
.prose-ac-dark h2, .prose-ac-dark h3, .prose-ac-dark h4 { color: var(--color-off-white); }
.prose-ac-dark blockquote { color: var(--color-off-white); }

/* Form primitives — used by AC Skins/Contact02Form + AC Skins/OwnersForm
   Authored verbatim from contact-v3.blade.php lines 56-60 / owners-v3.blade.php lines 158-162.
   Tailwind CDN cannot JIT custom utility classes; these MUST live in static CSS. */
.form-input {
  border: 1px solid rgba(207, 204, 193, 0.5);
  background: transparent;
  padding: 0.875rem 1rem;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  color: var(--color-black);
  width: 100%;
  transition: border-color 0.25s ease;
  border-radius: 0;
}
.form-input:focus { border-color: var(--color-terracotta); outline: none; }
.form-input::placeholder { color: var(--color-warm-grey); font-size: 14px; }
.form-label {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-medium-grey);
  margin-bottom: 0.5rem;
}
select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A4541' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* Generic text rotator - paired with initRotators() in AC Global/JS/main.js.
   Two variants picked by data-rotator="thanos" | "fade":
     - thanos: the [data-rotator-target] text is split into per-char
       <span class="hero-title-char"> nodes; chars stagger out with a Thanos-snap
       disintegration (blur+scale+drift+rotate), then the text swaps and new
       chars stagger in via the hero-char-materialize keyframe.
     - fade: element-level opacity+translateY fade-out then fade-in. No
       per-char wrapping; lighter and simpler. */
[data-rotator-target] {
  display: inline-block;
}
[data-rotator="thanos"] [data-rotator-target] {
  white-space: nowrap;
}
.hero-title-char {
  display: inline-block;
  transform-origin: center center;
  will-change: opacity, filter, transform;
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero-title-char.hero-char-out {
  opacity: 0;
  filter: blur(12px) brightness(1.8);
  transform: translate(var(--tx, 0), -12px) rotate(var(--rot, 0)) scale(1.4);
}
.hero-char-pre-in {
  opacity: 0;
}
.hero-title-char.hero-char-in {
  animation: hero-char-materialize 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes hero-char-materialize {
  0%   { opacity: 0; filter: blur(20px); transform: translateY(12px) scale(0.85); }
  25%  { opacity: 1; filter: blur(20px); transform: translateY(6px) scale(0.95); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

/* Fade variant - paired with rotateFade() in main.js. Drops to opacity:0 with a
   subtle upward translate, then animates back in from below. */
[data-rotator="fade"] [data-rotator-target] {
  display: inline-block;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.rotator-fade-out {
  opacity: 0 !important;
  transform: translateY(-4px) !important;
}
.rotator-fade-in {
  animation: rotator-fade-in-keys 0.4s ease both;
}
@keyframes rotator-fade-in-keys {
  0%   { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title-char,
  .hero-title-char.hero-char-out,
  .hero-title-char.hero-char-in {
    transition: none;
    animation: none;
    filter: none;
    transform: none;
    opacity: 1;
  }
  [data-rotator="fade"] [data-rotator-target],
  .rotator-fade-out,
  .rotator-fade-in {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* -----------------------------------------------------------
   v3 utility ports — extend existing reveal/stagger/img-hover
   to match v3 reference (journal-inner-v3, home-v3, villas-v3)
   ----------------------------------------------------------- */

/* Drop cap — float-left first letter on opening article paragraph
   Ported from journal-inner-v3.blade.php line 71.
   Scoped both globally and via .article-body for parity with v3. */
.drop-cap::first-letter,
.article-body .drop-cap::first-letter {
  font-family: var(--font-display);
  float: left;
  font-size: 4rem;
  line-height: 0.8;
  padding-right: 0.6rem;
  padding-top: 0.15rem;
  color: var(--color-charcoal);
}

/* Stagger-children — extend to 10 children (existing CSS stops at 6).
   v3 reference home-v3 stops at 5; villa-v4 stops at 6.
   Plan asks for ~10. Step kept at 100ms per child (matches existing). */
.stagger-children .reveal:nth-child(7)  { transition-delay: 600ms; }
.stagger-children .reveal:nth-child(8)  { transition-delay: 700ms; }
.stagger-children .reveal:nth-child(9)  { transition-delay: 800ms; }
.stagger-children .reveal:nth-child(10) { transition-delay: 900ms; }

/* Mobile + tablet-portrait horizontal slider (active below lg / 1024px).
   Apply class `ac-mobile-slider` on a grid element; wrap that element in a
   parent with `overflow-x-hidden` so accidental horizontal overflow can't
   leak and break sticky/fixed sibling layouts (e.g. mobile nav). */
.ac-mobile-slider-wrap { overflow-x: hidden; }
@media (max-width: 1023.98px) {
  /* Break the scroller out of the container's 1.5rem gutters so it runs
     edge-to-edge — peeking slides show in the bezels instead of being hard-cut
     at the content edge. The inner padding (1.5rem) keeps the first slide
     aligned with the content edge and leaves a 1.5rem inset after the last
     slide; scroll-padding-left snaps every slide to that same 1.5rem inset so
     the peeking neighbour is never clipped flush to the screen edge. */
  .ac-mobile-slider-wrap {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }
  .ac-mobile-slider {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 1.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 1.5rem 4px;
  }
  .ac-mobile-slider::-webkit-scrollbar { display: none; }
  .ac-mobile-slider > * {
    flex: 0 0 80%;
    scroll-snap-align: start;
    min-width: 0;
  }
}
@media (max-width: 640px) {
  .ac-mobile-slider > * { flex: 0 0 85%; }
}

/* Villa gallery: at lg+ (grid mode), show first 3 tiles by default;
   `.show-all-photos` (toggled by #toggleGalleryBtn) reveals the rest.
   Below lg the gallery is a slider — all items remain visible. */
@media (min-width: 1024px) {
  #galleryGrid:not(.show-all-photos) > [data-villa-gallery]:nth-child(n+4) { display: none; }
}

/* Suite lightbox meta: Subtitle CF is RTE so it ships with a wrapper <p>.
   Force any child <p> to inline so the line stays a single label. */
#suiteLbMeta p { display: inline; margin: 0; }

@media all and (min-width: 768px) and (max-height: 800px) {
    .hero-illustrated-homes { padding-bottom: 180px !important; }
}

@media all and (min-width: 768px) and (max-width: 1024px) {
    .hero-illustration.villas-illus-left { display: none; }
    .hero-illustration.villas-illus-right { top:85%; } 
}

@media all and (min-width: 992px) and (max-width: 1024px) {
    .hero-illustration.villas-illus-left { display: block; }
    .hero-illustration.villas-illus-left,
    .hero-illustration.villas-illus-right { width: 200px; top: 50%; }    
}

@media all and (min-width: 1024px) and (max-width: 1200px) {
    .hero-illustration.villas-illus-right { right: 0; }
    .hero-illustration.villas-illus-left { left: -0.5rem; }
    .hero-illustration.villas-illus-left,
    .hero-illustration.villas-illus-right { width: 220px; top: 50%; }
}

@media all and (min-width: 1200px) and (max-width: 1280px) {
    .hero-illustration.villas-illus-right { right: 0rem; }
    .hero-illustration.villas-illus-left,
    .hero-illustration.villas-illus-right { width: 280px; }       
}
@media all and (min-width: 1280px) and (max-width: 1440px) {
    .hero-illustration.villas-illus-right { right: 0rem; }
    .hero-illustration.villas-illus-left,
    .hero-illustration.villas-illus-right { width: 320px; }       
}